<!--
 * @Descripttion:
 * @version:
 * @Author: jiating
 * @Date: 2021-02-22 17:03:48
 * @LastEditors: jiating
 * @LastEditTime: 2021-02-24 14:59:55
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>K5G-C</title>
    <link rel="stylesheet" href="./css/common.css"/>
    <link rel="stylesheet" href="./css/index.css"/>
    <link rel="stylesheet" href="./css/mobile.css"/>
    <link rel="stylesheet" href="./css/modal.css">
    <style>
       #fileProgress{
            position: fixed;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            top: 0;
            left: 0;
            display: none;
            z-index: 998;
       }
       .fileContent{
        position: absolute;
        margin: 10% auto;
        width: 30%;
        z-index: 999;
        left: 50%;
        top: 20%;
        transform: translate(-50%,-20%);
        -webkit-transform: translate(-50%,-20%);
       }
       .fileDesc{
           margin-top: 10px;
           color: #fff;
       }
    </style>
</head>

<body>
<div class="main">
    <div class="tit-heade">
        <div class="itemOne">
            <img src="./image/left.png" >
        </div>
        <div class="itemTwo">
            <div class="item-chil">
                <img src="./image/logoutOne.png">
            </div>
            <div class="item-chil">
                <a href="/action/logout">ログアウト</a>
            </div>
            
        </div>
    </div>
    <div class="nav2">
        <div class="nav-item">
            <div id='x1' class="item " onclick="toPage('./home.html')">ホーム</div>
        </div>
        <div class="nav-item">
            <div id='x2' class="item no-act" onclick="toPage('./mobileData.html')">モバイルネットワーク</div>
        </div>
        <div class="nav-item">
            <div id='x3' class="item no-act" onclick="toPage('./wifi.html')">Wi-Fi設定</div>
            <div class="hide">
                <div>
                    <div id='x31' class="item1 no-act">wifi設定</div>
                    <div class="hide">
                        <div class="item2" id="wifi1" onclick="toPage('./wifi.html')">Wi-Fi</div>
                        <div class="item2" id="wifi2" onclick="toPage('./wifiList.html')">Wi-Fi 接続情報</div>
                        <div class="item2" id="wifi_list" onclick="toPage('./wifiManage.html')">接続デバイスの管理</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-item">
            <div id='x4' class="item no-act" onclick="toPage('./dhcp.html')">Ethernet設定</div>
            <div class="hide">
                <div>
                    <div id='x41' class="item1 no-act">DHCP固定割当設定</div>
                    <div class="">
                        <div class="item2" id="DHCP">DHCP固定割当設定</div>
                        <div class="item2" id="MAC">MAC IP Bindingリスト</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-item">
            <div id='x5' class="item no-act" onclick="toPage('./port.html')">LAN設定</div>
            <div class="hide">
                <div>
                    <div id='x51' class="item no-act">ポートフォワーディング</div>
                    <div class="hide">
                        <div class="item2" id="port">ポートフォワーディング</div>
                        <div class="item2" id="port_list">ポートフォワーディングリスト</div>
                    </div>
                </div>
                <div>
                    <div id='x52' class="item1 no-act">IPパケットフィルタリング</div>
                    <div class="hide">
                        <div class="item2" id="IP">IPパケットフィルタリング</div>
                        <div class="item2" id="IP_list">IPパケットフィルタリングリスト</div>
                    </div>
                </div>
                <div>
                    <div id='x55' class="item1 no-act"
                         onclick="toPage('./dmz.html')">
                        WANポートPingブロック</div>
                </div>
            </div>
        </div>
        <div class="nav-itm">
            <div id='x6' class="item no-act" onclick="toPage('./password.html')">端末設定</div>
            <div class="">
                <div>
                    <div class="">
                        <div class="item1" onclick="toPage('./password.html')">パスワード変更</div>
                        <div class="item1" onclick="toPage('./dataTrafficSetting.html')">データ通信量設定</div>
                        <div class="item1 choose" onclick="toPage('./offlineUpdate.html')">ソフトウェア更新</div>
                        <div class="item1" onclick="toPage('./reboot.html')">リセット</div>
                        <div class="item1" onclick="toPage('./deviceInformation.html')">デバイス情報</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="mobile" class="content">
        <div class="title">ソフトウェア更新</div>
        <div style="margin-left: 100px;margin-top: 10px;margin-bottom: 40px;">
            <p>オンラインでソフトウェア更新を行うことができます。</p>
            <p>オフラインアップデートをチェックして更新ファイルを選択すると、オフラインでソフトウェア更新を行うことができます。</p>
            
        </div>
        <form id="fileForm" method="post"  enctype="multipart/form-data">

            <table class="input-table">
                <tbody>
                <tr>
                    <th><label class="default-label" for="">更新方法</label></th>
                    <td>
                        <label style="display: block;">
                            <input onclick="security_click(0)" class="a-radio" type="radio" name="security"
                                   value="0" checked><span class="b-radio"></span>オンラインアップデート
                        </label>
                        <label style="display: block;">
                            <input onclick="security_click(1)" class="a-radio" type="radio" name="security"
                                   value="1" ><span class="b-radio"></span>オフラインアップデート
                        </label>
                    </td>
                </tr>
                <tr>
                    <th><label class="default-label" for="">ソフトウェアファイル名</label></th>
                    <td>
                        <input type="file" id="file-input" name="file">
                    </td>
                </tr>
                </tbody>
            </table>

            <div class="horizontal-box">
                <div onclick="update()" id="save-wifi" class="submit-btn">更新実行</div>
            </div>

            <div id="fileProgress">
                <div class="fileContent">
                    <div class="progress">
                        <progress id="progressbar" value="0" max="100" style="width:300px;"></progress><span id="percentage" style="color: #fff;display: inline-block;">0%</span>
                    </div>
                    <div class="fileDesc">
                        更新ファイルを転送しています。10分以上待っても完了しない場合は中断ボタンを押しK5G-C-100Aとの接続を確認して再度ソフトウェア更新を行ってください。
                    </div>
                    <div class="btn">
                        <div class="button-common" onclick="toPage('./offlineUpdate.html')">中断</div>
                    </div>
                </div>
                
            </div>
            <div class="form-box" style="padding: 30px;">
                <div style="color: #333333; font:bold; font-size: 24px; border-bottom: 1px solid #000">自動更新時刻設定
                </div>
            </div>
            <table class="input-table" style="margin-bottom: 15px;">
                <tbody>
                <tr>
                    <th><label class="default-label" for="">自動更新時刻</label></th>
                    <td>
                        <select  name="date" id="date">
                            <!--<option value="0">番号</option>-->
                            <option class="ap-channel-0" value="0">00:00 - 00:59</option>
                            <option class="ap-channel-0" value="1">01:00 - 01:59</option>
                            <option class="ap-channel-0" value="2">02:00 - 02:59</option>
                            <option class="ap-channel-0" value="3">03:00 - 03:59</option>
                            <option class="ap-channel-0" value="4">04:00 - 04:59</option>
                            <option class="ap-channel-0" value="5">05:00 - 05:59</option>
                            <option class="ap-channel-0" value="6">06:00 - 06:59</option>
                            <option class="ap-channel-0" value="7">07:00 - 07:59</option>
                            <option class="ap-channel-0" value="8">08:00 - 08:59</option>
                            <option class="ap-channel-0" value="9">09:00 - 09:59</option>
                            <option class="ap-channel-0" value="10">10:00 - 10:59</option>
                            <option class="ap-channel-0" value="11">11:00 - 11:59</option>
                            <option class="ap-channel-0" value="12">12:00 - 12:59</option>
                            <option class="ap-channel-0" value="13">13:00 - 13:59</option>
                            <option class="ap-channel-0" value="14">14:00 - 14:59</option>
                            <option class="ap-channel-0" value="15">15:00 - 15:59</option>
                            <option class="ap-channel-0" value="16">16:00 - 16:59</option>
                            <option class="ap-channel-0" value="17">17:00 - 17:59</option>
                            <option class="ap-channel-0" value="18">18:00 - 18:59</option>
                            <option class="ap-channel-0" value="19">19:00 - 19:59</option>
                            <option class="ap-channel-0" value="20">20:00 - 20:59</option>
                            <option class="ap-channel-0" value="21">21:00 - 21:59</option>
                            <option class="ap-channel-0" value="22">22:00 - 22:59</option>
                            <option class="ap-channel-0" value="23">23:00 - 23:59</option>
                        </select>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="horizontal-button">
<!--                <div onclick="updateSetting()" id="save-wifi1" class="button-common">設定</div>-->
                <div onclick="updateSetting()" id="save-wifi1" class="submit-btn">設定</div>
            </div>

        </form>
    </div>

    <!-- <div id="loading">
        <div class="loading-img">

        </div>
    </div> -->

</div>

<script type="text/javascript" src="./js/utils.js"></script>
<script>
    var updateStatus = 0
    window.onload = function (){
        security_click(0)
        getSimNum()
        getData()
    }

    function getData(){
        var params = {}
        Ajax.post(baseUrl + '/action/getAutoTime ', JSON.stringify(params), function (res) {
            var response = JSON.parse(res)
            if(response.status == 'success'){
                var data = response.data
                var time = parseInt(parseInt(data.fotaUpdateTime)/100)
                Utils.SetSelectValue("date", time || '0')
            }
            console.log(response,12121212)
            
        })
    }

    function getSimNum() {
        var num = sessionStorage.getItem('activeSimNumber')
        if (num == 0) {
            var btn = document.getElementById('x2')
            btn.onclick = function() {}
            btn.style.backgroundColor = '#eee'
        }
        var params = {}
        Ajax.post(baseUrl + '/action/getActiveSimCardNumber', JSON.stringify(params), function(res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                sessionStorage.setItem('activeSimNumber', response.data.activeSimNumber)
            }
        })
    }

    function security_click(data){
        updateStatus = data
        var file_input = document.getElementById("file-input")
        if(data == 0){
            file_input.disabled = true
        }else {
            file_input.disabled = false
        }
    }

    function update() {
        var way = Utils.GetRadioValue("security")
        var load = document.getElementById("fileProgress")

        var time = setInterval(function(){
            if(!window.navigator.onLine){
                clearInterval(time);
                load.style.display = "none"
                Message.info('転送に失敗しました。K5G-C-100Aとの接続を確認して再度ソフトウェア更新を行ってください。')
                return
            }
        },10000)

        if(way == 0){
            // 在线更新
            var params ={}
            Ajax.post(baseUrl + '/action/updateOnline', JSON.stringify(params), function (res) {
                var response = JSON.parse(res)
                if (response.status) {
                    toPage('./onlinProgress.html')
                } else {
                    Message.showmsg('更新に失敗しました')
                }
            })
        }
        if(way == 1){
            // var fileName = ''
            load.style.display = "block"
            // 离线更新
            var files = document.getElementById('file-input').files;
            //files是文件选择框选择的文件对象数组

            if(files.length == 0) {
                load.style.display = "none"
                Message.info('ファイルが選択されていません')
                return;
            }

            fileName = files[0].name.split('.')[0].toString()
            var reg =/[#@!$&'()-*+,;=%”\\/:*<>|~\"'%`^{}\n\r\t\f\s(\u0800-\u4e00)(\uFF00-\uFFFF)(\u4E00-\u9FFF)]/g
            if(reg.test(fileName)){
                load.style.display = "none"
                Message.info('ファイルが間違っています。選択されたファイルを見直し再度ソフトウェア更新を行ってください。')
                return;
            }

            var form = new FormData(),
                url = './action/uploadFile', //服务器上传地址
                file = files[0];
            form.append('file', file);

            var xhr = new XMLHttpRequest();
            xhr.open("post", url, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
                    var response = JSON.parse(xhr.response)
                    if(response.status == 'success'){
                        load.style.display = 'none'
                        var params ={}
                        Ajax.post(baseUrl + '/action/updateLocal', JSON.stringify(params), function (res) {
                            var response = JSON.parse(res)
                            if (response.status == 'success') {
                                toPage('./updateProgress.html')
                            }
                        })
                    }else {
                        if(response.message == '1'){
                            load.style.display = 'none'
                            Message.info('ファイルが間違っています。選択されたファイルを見直し再度ソフトウェア更新を行ってください。')
                        }else if(response.message != '1'){
                            load.style.display = 'none'
                            Message.info('転送に失敗しました。K5G-C-100Aとの接続を確認して再度ソフトウェア更新を行ってください。')
                        }
                        
                    }
                }
            };
            // xhr.onload = uploadComplete; //请求完成
            // xhr.onerror =  uploadFailed; //请求失败
            xhr.upload.onprogress = progressFunction;
            xhr.send(form); //开始上传
        }
    }

    function progressFunction(evt){
        var loadingCover = document.getElementById('loading-cover');
        var showloading = document.getElementById('showloading');
        var progressBar = document.getElementById('progressbar');
        var percentage = document.getElementById('percentage');
        if(evt.lengthComputable){
            progressbar.max = evt.total;
            progressBar.value = evt.loaded;
            var loading = Math.round(evt.loaded / evt.total * 100);
            percentage.innerHTML = loading + '%';
            showloading.innerHTML = loading + '%';
            loadingCover.style.top = -loading + '%';
            if(loading==100){
                showloading.style.display = 'none';
            }
        }
    }

    function uploadComplete(evt) {
    // 服务断接收完文件返回的结果
    // alert(evt.target.responseText);
        var load = document.getElementById("fileProgress")
        load.style.display = 'none'
        // Message.showmsg('ファイルのアップロードに成功しました')
    }
    // 上传失败
    function uploadFailed(evt) {
        console.log(evt,1212121212);
        var load = document.getElementById("fileProgress")
        load.style.display = 'none'
        
        Message.info('転送に失敗しました。K5G-C-100Aとの接続を確認して再度ソフトウェア更新を行ってください。')
    }

    function updateSetting(){
        var date = Utils.GetSelectValue("date")
        //if(date == '0'){
        //    Message.info('時間が選択されていません')
        //    return
        //}
        var params ={
            time:date
        }
        Ajax.post(baseUrl + '/action/updateOnlineTime', JSON.stringify(params), function (res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                Message.info('設定しました')
            } else {
                Message.info('更新に失敗しました')
            }
        })

    }




</script>
</body>

</html>
